<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue';
import { Refresh } from '@element-plus/icons-vue';


const currentPage4 = ref(4)
const pageSize4 = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}


let username = ref('')
let email = ref('')

const query = () => {}

const tableData = [
  { username:"李莲花",
    sex:"男",
    age:38,
    email:"123456@qq.com",
    phone:12345678901,
    address:"莲花楼",

  },
  {
    username:"方多病",
    sex:"男",
    age:23,
    email:"fdb@qq.com",
    phone:1589999999,
    address:"天机堂",

  },
  {
    username:"笛飞声",
    sex:"男",
    age:39,
    email:"dfs@153.com",
    phone:13266666666,
    address:"金鸳盟",

  },
  {
    username:"乔婉娩",
    sex:"女",
    age:32,
    email:"qwm@163.com",
    phone:12345678901,
    address:"四顾门",

  },
  {
    username:"角丽谯",
    sex:"女",
    age:32,
    email:"jlq@163.com",
    phone:1258888888,
    address:"金鸳盟",

  },

]
</script>

<template>
  <div>
    <el-card>
    <div class="query-input">
      <el-input v-model="username" placeholder="请输入用户名"/>
      <el-input v-model="email" placeholder="请输入邮箱"/>
      <el-button type="primary" @click="query"> 
        <el-icon><Search /></el-icon>
        查询
      </el-button>
      <el-button type="danger" @click="query">
        <el-icon><Refresh /></el-icon>
        重置
      </el-button>
    </div>
    
  </el-card>

  <el-card>
    <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="username" label="姓名" width="180" />
    <el-table-column prop="sex" label="性别" width="180" />
    <el-table-column prop="age" label="年龄" width="180" />
    <el-table-column prop="email" label="邮箱" width="180" />
    <el-table-column prop="phone" label="电话" width="180" />
    <el-table-column prop="address" label="地址"  />
    <el-table-column fixed="right" label="操作" width="180">
      <template #default>
        <el-button  type="primary" size="small" 
          >编辑</el-button
        >
        <el-button  type="danger" size="small">删除</el-button>
      </template>
    </el-table-column>

  </el-table>

  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  </el-card>
  </div>
</template>

<style scoped>

  .el-input {
    margin-right: 5px;
    width: 300px;
  }
  .query-input{
    display: flex;
    justify-content:center
  }
  .el-card{
    margin-bottom: 10px;
  }
  .demo-pagination-block{
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }

</style>